//2.2.4创建my-menu.js，显示树形结构
$(function () {
    /*加载要显示的数据*/
    initWholeTree();

    $("#menuAddBtn").click(function () {
        /*var name = $.trim($("#menuAddModal [name='name']").val());*/
       /* var name=$('[name="name"]').val();
        var url=$('[name="url"]').val();
        var icon=$('[name="icon"]').val();*/
        var pid=window.menuId;
        // 收集表单填写的数据
        var name = $.trim($("#menuAddModal [name='name']").val());
        var url = $.trim($("#menuAddModal [name='url']").val());
        var icon = $("#menuAddModal [name='icon']:checked").val();
        if(name.length==0){
layer.msg("菜单名称不能为空")
        return;

        }
        if(url.length==0){
            layer.msg("url不能为空")
            return;

        }
        /*发送ajax请求*/
        // 发送Ajax请求
        $.ajax({
            "url":"/menu/save",
            "type":"post",
            "dataType":"json",
            "data":{
                "name":name,
                "url":url,
                "pid":pid,   // 当前操作的节点是新节点的父节点
                "icon":icon
            },
            "success":function(response){

                var result = response.result;

                if(result== "SUCCESS") {
                    layer.msg("操作成功！");
                    /*刷新菜单*/
                    initWholeTree();
                }

                if(result== "FAILED") {
                    layer.msg(response.message);
                }

            },
            "error":function(response){
                layer.msg(response.message);
            }
        });
        /*隐藏模态框*/
        $("#menuAddModal").modal("hide");
    })

    /*单击事件更新按钮的*/
    //确定修改
    $("#menuEditBtn").click(function(){

        // 收集表单填写的数据
        var name = $.trim($("#menuEditModal [name='name']").val());
        var url = $.trim($("#menuEditModal [name='url']").val());
        var icon = $("#menuEditModal [name='icon']:checked").val();
        var id=window.menuId;
        if(name == null || name == "") {
            layer.msg("请填写菜单项名称！");
            return ;
        }

        if(url == null || url == "") {
            layer.msg("请填写菜单项对应的访问地址！");
            return ;
        }

        // 发送Ajax请求
// 发送Ajax请求
        $.ajax({
            "url":"/menu/update",
            "type":"post",
            "dataType":"json",
            "data":{
                "id":id,
                "name":name,
                "url":url,
                "icon":icon
            },
            "success":function(response){

                var result = response.result;

                if(result == "SUCCESS") {
                    layer.msg("操作成功！");

                    initWholeTree();
                }

                if(result == "FAILED") {
                    layer.msg(response.message);
                }

            },
            "error":function(response){
                layer.msg(response.message);
            }
        });

        /*隐藏模态框*/
        $("#menuEditModal").modal("hide");
    });

    /*根据id删除一条数据*/
    $("#menuDeleteBtn").click(function () {
      /*  var requestBody=JSON.stringify(window.menuId);*/
      var id=window.menuId;
        $.ajax({
            url: "/menu/batch/remove",
            type: "post",
            data: id,
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success:function (ajaxResult) {
                var result=ajaxResult.result;
                if(result=="SUCCESS"){
                    layer.msg("删除成功!");
                    /*加载要显示的数据*/
                    initWholeTree();
                }else{
                    layer.msg("删除失败!");
                }
                $("#menuDeteleModal").modal("hide");
            }
        })
    })

})
//2.2.6声明函数将图标修改为自定义图标
// 由setting.view.addDiyDom属性引用，负责显示自定义图标
// treeId是<ul id="treeDemo" class="ztree"></ul>的id属性值
// treeNode对应每一个树形节点
//原理：修改每个节点的class
function showMyIcon(treeId, treeNode) {
    console.log(treeId);
    console.log(treeNode);

    //获取当前节点的id
    var currentNodeId=treeNode.tId;
    //获取新的class值用于替换
    var newClass=treeNode.icon;
    //在当前节点id之前加"_ico"得到目标的span的id
    var  targetSpanId=currentNodeId+"_ico";//treeDemo_4_ico
    $("#"+targetSpanId).removeClass().addClass(newClass).css("background","");
}

//3.4声明函数生成按钮组
function generateBtnGrp(treeNode) {
    //获取当前节点的id(li的id)
    var tid=treeNode.tId;
    //组装按钮组所在span的Id
    var btnGrpSpanId=tid+"_btnGrp";
    //生成span标签jquery对应的对象
    var $span=$("<span id='"+btnGrpSpanId+"'><span/>")
    //获取当前节点在数据库中的id
    var menuId=treeNode.id;
    //获取当前节点的level
    var level=treeNode.level;

    // 声明三种按钮
    var addBtn = "<a onclick='showAddModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg'></i></a>";
    var editBtn = "<a onclick='showEditModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='编辑节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg'></i></a>";
    var removeBtn = "<a onclick='showConfirmModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='删除节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg'></i></a>";

    // 根据level进行判断
    if(level==1){
        $span.append(addBtn);
    }else if(level==2){
        if(treeNode.children.length>0){
        $span.append(addBtn+" "+editBtn);
        }else{
            $span.append(addBtn+" "+editBtn+" "+removeBtn);
        }
    }else{
        $span.append(editBtn+" "+removeBtn);
    }
return $span;
}
//3.5addHoverDom(treeId, treeNode)函数
//鼠标悬浮在节点上时调用此方法
function addHoverDom(treeId, treeNode){
    //在执行添加前,先进行判断,如果已经添加过则停止执行
 /*   var btnGrpSpanId=treeNode.tId+"_btnGrp";
    if(btnGrpSpanId.length>0){
    return ;
    }*/
    var btnGrpSpanId = treeNode.tId + "_btnGrp";

    var btnGrpSpanLength = $("#"+btnGrpSpanId).length;

    if(btnGrpSpanLength > 0) {
        return ;
    }

    //获取按钮组
    var btnGrpSpan=generateBtnGrp(treeNode);
    //由于按钮组是放在当前节点中的超链接(a标签)后面.所以先定位到a标签
    //按id生成规则组装a标签的id
    var anchorId=treeNode.tId+"_a";
    //在a标签后面追加按钮组
    $("#"+anchorId).append(btnGrpSpan);
}
//3.6removeHoverDom(treeId, treeNode)函数
////鼠标移出节点时调用此方法
function removeHoverDom(treeId, treeNode) {
// 组装按钮组所在的span标签的id
var btnGrpSpanId=treeNode.tId+"_btnGrp";
//删除对应的元素
    $("#"+btnGrpSpanId).remove();

}

/*添加子节点*/
function showAddModal(obj) {
    // 将当前节点的id存入全局变量
    window.menuId = $(obj).attr("id");
    // 打开模态框
    $("#menuAddModal").modal("show");

}
/*加载zTree*/
function initWholeTree() {
    //setting对象中包括  zTree的设置属性
    var setting ={
        view:{
            "addDiyDom":showMyIcon,
            "addHoverDom": addHoverDom,
            "removeHoverDom": removeHoverDom
        },
        data:{
            key:{
                url:"notExistsProperty"
            }
        }
    };
    //发送ajax请求zTree数据
    $.ajax({
        url:"/menu/get/whole/tree",
        type:"post",
        dataType:"json",
        success:function (ajaxResult) {
            var result=ajaxResult.result;
            if(result=="SUCCESS"){
                //显示数据
                var zNodes=ajaxResult.data;
                //执行树形结果的初始操作
                $.fn.zTree.init($("#treeDemo"),setting,zNodes);
            }else{
                layer.msg("加载菜单数据失败！原因是："+response.message);
            }
        }
    })
}

/*修改节点*/
function showEditModal(obj) {
    // 将当前节点的id存入全局变量
    window.menuId = $(obj).attr("id");
    // 打开模态框
    $("#menuEditModal").modal("show");
    /*发送ajax请求*/
    // 发送请求查询Menu对象
    $.ajax({
        "url":"/menu/get/"+window.menuId,
        "type":"get",
        "dataType":"json",
        "success":function(response) {

            var result = response.result;

            if(result == "SUCCESS") {

                // 从响应数据中获取Menu对象
                var menu = response.data;

                // 获取各个属性值
                var name = menu.name;

                var url = menu.url;

                var icon = menu.icon;

                // 设置各个对应的表单项
                $("#menuEditModal [name='name']").val(name);

                $("#menuEditModal [name='url']").val(url);

                // radio需要让value值和后端查询到的icon一致的设置为被选中
                $("#menuEditModal [name='icon'][value='"+icon+"']").attr("checked",true);
            }

            if(result == "FAILED") {
                layer.msg(response.message);
            }
        },
        "error":function(response) {
            layer.msg(response.message);
        }
    });
}

/*删除一条数据*/
function showConfirmModal(obj) {
    // 将当前节点的id存入全局变量
    window.menuId = $(obj).attr("id");
    /*// 打开模态框
    $("#menuDeteleModal").modal("show");*/
    /*获取节点名称*/
    var name=$(obj).parent().prev().text();
    var r=confirm("确认删除"+name+"菜单吗")
    if(r==false){
     return;
    }else{
        /*发送删除请求*/
       $.ajax({
           "url":"/menu/batch/remove/"+window.menuId,
           "type":"get",
           "dataType":"json",
           "success":function(response) {
               if(response.result=="SUCCESS"){
                layer.msg("删除成功")
                   /*刷新数据*/
                   initWholeTree();
               }else{
                   layer.msg("删除失败")
               }
           }
       })

    }

}


